<template>
    <div class="publish-container">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <!-- 面包屑路径导航 -->
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>{{$route.query.id ? '修改文章' : '发布文章'}}</el-breadcrumb-item>
                </el-breadcrumb>
                <!-- 面包屑路径导航 -->
            </div>
            <el-form ref="form" :model="article" label-width="80px">
                <el-form-item label="标题">
                    <el-input v-model="article.title"></el-input>
                </el-form-item>
                <el-form-item label="内容">
                    <el-input type="textarea" v-model="article.content"></el-input>
                </el-form-item>
                <el-form-item label="封面">
                    <el-radio-group v-model="article.cover.type">
                        <el-radio :label="1">单图</el-radio>
                        <el-radio :label="3">三图</el-radio>
                        <el-radio :label="0">无图</el-radio>
                        <el-radio :label="-1">自动</el-radio>
                    </el-radio-group>
                    <!--
                         我们需要把选择的封面图片地址放到article.cover.images  数组中
                         如果想要在事件处理函数自定义传参以后还想得到原来的那个事件本身的参数
                         则手动指定 $event 它就代表那个事件本身的参数

                         在组件上使用 v-model

                         当你给子组件提供的数据既要使用还要修改，这个时候我们可以使用 v-model 
                         简化数据绑定
                            v-model="article.cover.images[index]"
                            给子组件传递了一个名字叫 value 的数据
                            :value="article.cover.images[index]"
                            默认监听 input 事件，当事件发生，它会让绑定数据 = 事件参数
                            @input="article.cover.images[index]" = 事件参数

                            注意： v-model
                            仅仅是简写了而已， 本质还在父子通信
                    -->
                  <template v-if="article.cover.type > 0">
                  <div class="box">
                           <upload-cover
                         v-for="(cover,index) in article.cover.type" 
                         :key="index" 
                         v-model="article.cover.images[index]" 
                         />
                  </div>
                        <!-- <upload-cover
                         v-for="(cover,index) in article.cover.type" 
                         :key="index" 
                         @update-cover="onUpdateCover(index,$event)" 
                         :cover-image="article.cover.images[index]"
                         v-model="article.cover.images[index]" 
                         /> -->
                  </template>
                </el-form-item>
                <el-form-item label="频道">
                    <el-select v-model="article.channel_id" placeholder="请选择频道">
                        <el-option v-for="(item, index) in channels" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onPublish(false)">发表</el-button>
                    <el-button @click="onPublish(true)">存入草稿</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import { addArticle, getArticleChannels, getArticles,updateArticle } from "@/api/article";
import UploadCover from './components/upload-cover'

export default {
    name: "PublishIndex",
    components:{
    UploadCover
  
    },
    data() {
        return {
            form: {
                name: "",
                region: "",
                date1: "",
                date2: "",
                delivery: false,
                type: [],
                resource: "",
                desc: "",
            },
            article: {
                title: "", //文章标题
                content: "", //文章内容
                cover: {
                    // 文章封面
                    type: 0, // 封面类型 -1:自动，0-无图，1-1张，3-3张
                    images: [], // 封面图片的地址
                },
                channel_id: null,
            },
            channels: [], //文章频道列表数据
        };
    },
    created() {
        this.loadChannels();

        // 由于我们让发布和修改使用的同一个组件
        // 所以这里要判断
        // 如果路由路径参数中有 id， 则请求展示文章内容
        if (this.$route.query.id) {
            this.loadArticle();
        }
    },
    methods: {
        onSubmit() {
            console.log("submit!");
        },
        // 获取频道列表
        loadChannels() {
            getArticleChannels().then((res) => {
                this.channels = res.data.data.channels;
            });
        },
        onPublish(draft = false) {
            // 如果是修改文章，则执行修改操作，否则执行添加操作
            const articleId = this.$route.query.id;
            if (articleId) {
                // 执行修改操作
                updateArticle(articleId,this.article,draft).then(res=>{
                    console.log(res)
                      this.$message({
                        message: "修改成功",
                        type: "success",
                    });
                })
            } else {
                addArticle(this.article, draft).then((res) => {
                    this.$message({
                        message: "发布成功",
                        type: "success",
                    });
                     // 跳转到内容管理页面
                this.$router.push('/article')
                });
               
            }
        },
        // 修改文章：加载文章内容
        loadArticle() {
            getArticles(this.$route.query.id).then((res) => {
                this.article = res.data.data;
            });
        },
        onUpdateCover(index,url){
           this.article.cover.images[index] = url;
        },
        saveDraft() {},
    },
};
</script>


<style scoped>
.box{
    display: flex;
}
.upload-cover{
    margin-right: 10px;
}
</style>

